<template>
  <div v-if="!isInRoom" class="modern-lobby">
    <!-- 背景装饰 -->
    <div class="background-decoration">
      <div class="floating-circle circle-1"></div>
      <div class="floating-circle circle-2"></div>
      <div class="floating-circle circle-3"></div>
    </div>

    <!-- 主要内容 -->
    <div class="lobby-container">
      <!-- 头部 -->
      <header class="lobby-header">
        <div class="header-content">
          <div class="logo">
            <div class="logo-icon">🎨</div>
            <div class="logo-text">
              <h1>涂色抢地盘</h1>
              <p>Territory Paint Game</p>
            </div>
          </div>
          <div class="header-subtitle">
            <p>多人实时涂色竞技，占领面积最大者获胜！</p>
            <!-- 游戏规则弹窗 -->
            <div class="rules-section">
              <el-popover 
                placement="bottom" 
                title="🎮 游戏规则详解" 
                :width="500" 
                trigger="hover"
                popper-class="game-rules-popover"
              >
                <template #reference>
                  <el-button type="primary" plain class="rules-button">
                    <el-icon><InfoFilled /></el-icon>
                    游戏规则
                  </el-button>
                </template>
                <div class="rules-content">
                  <div class="rule-section">
                    <h4>🎯 游戏目标</h4>
                    <p>在有限时间内，通过涂色占领画布区域，游戏结束时占领面积最大的玩家获胜。</p>
                  </div>
                  
                  <div class="rule-section">
                    <h4>🎨 游戏玩法</h4>
                    <ul>
                      <li>每位玩家选择一种独特的颜色</li>
                      <li>使用鼠标在画布上点击或拖拽进行涂色</li>
                      <li>涂色的区域会变成你的颜色，计入你的得分</li>
                      <li>可以覆盖其他玩家的颜色来扩大自己的地盘</li>
                    </ul>
                  </div>
                  
                  <div class="rule-section">
                    <h4>⏰ 游戏时间</h4>
                    <p>每局游戏时间可自定义设置，通常在3-10分钟之间。</p>
                  </div>
                  
                  <div class="rule-section">
                    <h4>🏆 胜利条件</h4>
                    <p>游戏结束时，系统会计算每位玩家涂色的像素数量，占领面积最大的玩家获胜。</p>
                  </div>
                  
                  <div class="rule-section">
                    <h4>💡 策略提示</h4>
                    <ul>
                      <li>优先占领画布中心区域</li>
                      <li>注意观察其他玩家的动向</li>
                      <li>合理分配时间，不要只专注一个区域</li>
                      <li>利用画布的边界和角落</li>
                    </ul>
                  </div>
                </div>
              </el-popover>
            </div>
          </div>
        </div>
      </header>

      <!-- 主要内容 -->
      <main class="lobby-main">
        <!-- 左侧：快速操作 -->
        <div class="left-panel">
          <!-- 创建房间卡片 -->
          <div class="action-card create-card">
            <div class="card-header">
              <div class="card-icon">🏠</div>
              <h2>创建房间</h2>
              <p>开始一场新的涂色竞技</p>
            </div>
            <div class="card-content">
              <form @submit.prevent="createRoom">
                <div class="form-group">
                  <label>房间名称</label>
                  <input 
                    v-model="newRoom.name"
                    type="text"
                    placeholder="给你的房间起个名字"
                    maxlength="20"
                    required
                  />
                </div>
                
                <div class="form-group">
                  <label>房间密码 <span class="optional">(可选)</span></label>
                  <input 
                    v-model="newRoom.password"
                    type="password"
                    placeholder="设置房间密码"
                    maxlength="20"
                  />
                </div>
                
                <div class="form-row">
                  <div class="form-group">
                    <label>最大玩家数</label>
                    <select v-model="newRoom.maxPlayers">
                      <option value="2">2人</option>
                      <option value="3">3人</option>
                      <option value="4">4人</option>
                      <option value="5">5人</option>
                      <option value="6">6人</option>
                    </select>
                  </div>
                  
                  <div class="form-group">
                    <label>游戏时长</label>
                    <select v-model="newRoom.gameDuration">
                      <option value="180">3分钟</option>
                      <option value="240">4分钟</option>
                      <option value="300">5分钟</option>
                    </select>
                  </div>
                </div>
                
                <button 
                  type="submit"
                  :disabled="!newRoom.name.trim() || isCreating"
                  class="btn btn-primary"
                >
                  <span v-if="isCreating" class="loading-spinner"></span>
                  <span v-else>🚀 创建房间</span>
                </button>
              </form>
            </div>
          </div>

          <!-- 加入房间卡片 -->
          <div class="action-card join-card">
            <div class="card-header">
              <div class="card-icon">🚪</div>
              <h2>加入房间</h2>
              <p>参与朋友的涂色竞技</p>
            </div>
            <div class="card-content">
              <form @submit.prevent="joinRoom">
                <div class="form-group">
                  <label>房间代码</label>
                  <input 
                    v-model="joinRoomCode"
                    type="text"
                    placeholder="输入房间代码"
                    maxlength="10"
                    required
                  />
                </div>
                
                <div class="form-group" v-if="showPasswordInput">
                  <label>房间密码</label>
                  <input 
                    v-model="joinPassword"
                    type="password"
                    placeholder="输入房间密码"
                  />
                </div>
                
                <button 
                  type="submit"
                  :disabled="!joinRoomCode.trim() || isJoining"
                  class="btn btn-secondary"
                >
                  <span v-if="isJoining" class="loading-spinner"></span>
                  <span v-else>🎯 加入房间</span>
                </button>
              </form>
            </div>
          </div>
        </div>

        <!-- 右侧：房间列表 -->
        <div class="right-panel">
          <div class="room-list-section">
            <div class="section-header">
              <div class="header-info">
                <h3>🏆 热门房间 ({{ availableRooms.length }})</h3>
                <p>正在进行的涂色竞技</p>
              </div>
              <div class="header-actions">
                <button @click="refreshRooms" class="btn btn-outline btn-sm">
                  🔄 刷新
                </button>
              </div>
            </div>
            
            <div class="room-list">
              <div 
                v-for="room in availableRooms" 
                :key="room.id"
                class="room-item"
                @click="joinRoomByCode(room.code)"
              >
                <div class="room-info">
                  <div class="room-name">{{ room.name }}</div>
                  <div class="room-details">
                    <span class="room-code">代码: {{ room.code }}</span>
                    <span class="room-players">{{ room.playerCount }}/{{ room.maxPlayers }}人</span>
                    <span class="room-duration">{{ formatDuration(room.gameDuration) }}</span>
                  </div>
                </div>
                
                <div class="room-actions">
                  <span v-if="room.hasPassword" class="password-badge">🔒</span>
                  <button 
                    :disabled="room.playerCount >= room.maxPlayers"
                    class="btn btn-sm"
                    :class="room.playerCount >= room.maxPlayers ? 'btn-disabled' : 'btn-success'"
                  >
                    {{ room.playerCount >= room.maxPlayers ? '已满员' : '立即加入' }}
                  </button>
                  <button 
                       class="btn btn-sm btn-danger"
                       @click.stop="deleteRoom(room.code)"
                       style="margin-left:8px;"
                        >
                         删除
                       </button>
                </div>
              </div>
              
              <div v-if="availableRooms.length === 0" class="empty-state">
                <div class="empty-icon">🎨</div>
                <h4>暂无可用房间</h4>
                <p>创建第一个房间开始游戏吧！</p>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>

    <!-- 错误提示 -->
    <div v-if="errorMessage" class="error-toast" @click="errorMessage = ''">
      ⚠️ {{ errorMessage }} ×
    </div>

    <!-- 加载遮罩 -->
    <div v-if="isLoading" class="loading-overlay">
      <div class="loading-content">
        <div class="loading-spinner-large"></div>
        <p>加载中...</p>
      </div>
    </div>
  </div>

  <div v-else class="waiting-room">
    <div class="waiting-header">
      <h2>{{ currentRoom.name }}</h2>
      <p>房间代码: {{ currentRoom.code }}</p>
      <p>玩家数量: {{ currentRoom.players }}/{{ currentRoom.maxPlayers }}</p>
    </div>
    
    <div class="waiting-main">
      <div class="player-grid">
        <div 
          v-for="n in currentRoom.maxPlayers" 
          :key="n" 
          class="player-slot"
          :class="{ 'occupied': n <= currentRoom.players }"
          :title="n <= currentRoom.players ? `玩家${n}` : `等待玩家${n}加入`"
        >
          <div v-if="n <= currentRoom.players" class="player-info">
            <div class="player-avatar">{{ n }}</div>
            <div class="player-name">玩家{{ n }}</div>
          </div>
          <div v-else class="empty-slot">
            <div class="empty-avatar">{{ n }}</div>
            <span>等待玩家{{ n }}加入</span>
          </div>
        </div>
      </div>
      
      <div class="waiting-actions">
        <!-- 只有房主才能开始游戏和解散房间 -->
        <button v-if="isRoomOwner" class="btn btn-primary" @click="startGame">
          开始游戏
        </button>
        <button v-if="isRoomOwner" class="btn btn-secondary" @click="startSoloTest">
          单人测试
        </button>
        <button class="btn btn-outline" @click="leaveRoom">
          离开房间
        </button>
        <button v-if="isRoomOwner" class="btn btn-danger" @click="disbandRoom">
          解散房间
        </button>
      </div>
    </div>
    
    <div class="waiting-chat">
      <div class="chat-messages">
        <div v-for="(message, index) in chatMessages" :key="index" class="message">
          <span class="sender">{{ message.sender }}:</span>
          <span class="content">{{ message.content }}</span>
        </div>
      </div>
      <div class="chat-input">
        <input 
          v-model="newMessage" 
          type="text" 
          placeholder="输入聊天内容..."
          @keyup.enter="sendMessage"
        />
        <button @click="sendMessage">发送</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import signalRService from '../services/signalRService'
import { InfoFilled } from '@element-plus/icons-vue'

const router = useRouter()

// 响应式数据
const newRoom = ref({
  name: '',
  password: '',
  maxPlayers: 6,
  gameDuration: 180
})

const joinRoomCode = ref('')
const joinPassword = ref('')
const showPasswordInput = ref(false)

const availableRooms = ref([])
const isLoading = ref(false)
const isCreating = ref(false)
const isJoining = ref(false)
const errorMessage = ref('')

// 等待房间相关状态
const isInRoom = ref(false)
const currentRoom = ref({
  name: '',
  code: '',
  maxPlayers: 6,
  players: 1,
  password: ''
})

const chatMessages = ref([])
const newMessage = ref('')

// 计算属性：判断是否为房主
const isRoomOwner = computed(() => {
  // 如果是创建房间进入的，或者是第一个加入的玩家，则认为是房主
  return currentRoom.value.players === 1 || currentRoom.value.isOwner
})

// 创建房间
const createRoom = async () => {
  if (!newRoom.value.name.trim()) return
  
  isCreating.value = true
  errorMessage.value = ''
  
  try {
    const apiBaseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:5000'
    const response = await fetch(`${apiBaseUrl}/api/commands/create-room`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        name: newRoom.value.name,
        password: newRoom.value.password || null,
        maxPlayers: newRoom.value.maxPlayers,
        gameDuration: newRoom.value.gameDuration,
        playerNickName: '玩家' + Math.floor(Math.random() * 1000) // 临时生成玩家昵称
      })
    })
    
    if (response.ok) {
      const result = await response.json()
      currentRoom.value = {
        name: newRoom.value.name,
        code: result.roomCode,
        maxPlayers: newRoom.value.maxPlayers,
        players: 1,
        password: newRoom.value.password
      }
      isInRoom.value = true
    } else {
      const error = await response.json()
      errorMessage.value = error.message || '创建房间失败'
    }
  } catch (error) {
    errorMessage.value = '网络错误，请重试'
  } finally {
    isCreating.value = false
  }
}

// 加入房间
// 添加玩家信息存储
const playerId = ref(localStorage.getItem('playerId') || crypto.randomUUID())
const playerNickname = ref(localStorage.getItem('playerNickname') || '玩家' + Math.floor(Math.random() * 1000))

// 调试信息
console.log('当前房间状态:', currentRoom.value)

// 加入房间
const joinRoom = async () => {
  if (!joinRoomCode.value.trim()) return
  
  isJoining.value = true
  errorMessage.value = ''
  
  try {
    // 存储玩家信息到localStorage
    localStorage.setItem('playerId', playerId.value)
    localStorage.setItem('playerNickname', playerNickname.value)
    
    const apiBaseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:5000'
    const response = await fetch(`${apiBaseUrl}/api/commands/join-room`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        RoomCode: joinRoomCode.value,
        Password: joinPassword.value || null,
        PlayerId: playerId.value,
        PlayerNickName: playerNickname.value
      })
    })
    
    if (response.ok) {
      const result = await response.json()
      currentRoom.value = {
        name: result.roomName,
        code: joinRoomCode.value,
        maxPlayers: result.maxPlayers || 6, // 确保有默认值
        players: result.currentPlayers || 1, // 确保有默认值
        password: result.hasPassword ? '****' : ''
      }
      isInRoom.value = true
      
      // 调试信息
      console.log('加入房间成功，房间状态:', currentRoom.value)
      console.log('最大玩家数:', currentRoom.value.maxPlayers)
      console.log('当前玩家数:', currentRoom.value.players)
    } else {
      const error = await response.json()
      if (error.errorCode === 'PASSWORD_REQUIRED') {
        showPasswordInput.value = true
      } else {
        // 简化错误信息，避免显示技术细节
        errorMessage.value = '加入房间失败，请检查房间代码和密码'
      }
    }
  } catch (error) {
    errorMessage.value = '网络错误，请重试'
  } finally {
    isJoining.value = false
  }
}

// 通过房间代码加入
const joinRoomByCode = (code) => {
  joinRoomCode.value = code
  joinRoom()
}

// 刷新房间列表
const refreshRooms = async () => {
  isLoading.value = true
  
  try {
    const apiBaseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:5000'
    const response = await fetch(`${apiBaseUrl}/api/queries/rooms`)
    if (response.ok) {
      const result = await response.json()
      if (result.success && result.rooms) {
        // 转换后端数据格式为前端期望的格式
        availableRooms.value = result.rooms.map(room => ({
          id: room.id,
          name: room.name,
          code: room.roomCode || room.id.toString().substring(0, 8).toUpperCase(), // 使用实际的房间代码
          playerCount: room.playerCount,
          maxPlayers: room.maxPlayers,
          gameDuration: room.gameDuration,
          hasPassword: room.hasPassword || false
        }))
      } else {
        availableRooms.value = []
        if (result.errorMessage) {
          errorMessage.value = result.errorMessage
        }
      }
    } else {
      availableRooms.value = []
      errorMessage.value = '获取房间列表失败'
    }
  } catch (error) {
    console.error('获取房间列表失败:', error)
    availableRooms.value = []
    errorMessage.value = '网络错误，请稍后重试'
  } finally {
    isLoading.value = false
  }
}

// 格式化游戏时长
const formatDuration = (seconds) => {
  const minutes = Math.floor(seconds / 60)
  return `${minutes}分钟`
}

// 等待房间操作
const startGame = () => {
  router.push(`/room/${currentRoom.value.code}`)
}

const startSoloTest = () => {
  router.push(`/room/${currentRoom.value.code}?test=true`)
}

const leaveRoom = async () => {
  try {
    await signalRService.leaveRoom()
    isInRoom.value = false
    currentRoom.value = {
      name: '',
      code: '',
      maxPlayers: 6,
      players: 0,
      password: ''
    }
    refreshRooms()
  } catch (error) {
    errorMessage.value = '离开房间失败'
  }
}
const deleteRoom = async (code) => {
  try {
    const apiBaseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:5000'
    const response = await fetch(`${apiBaseUrl}/api/commands/delete-room`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ RoomCode: code })
    })
    if (response.ok) {
      availableRooms.value = availableRooms.value.filter(room => room.code !== code)
    } else {
      errorMessage.value = '删除房间失败'
    }
  } catch (error) {
    errorMessage.value = '网络错误，删除失败'
  }
}

const disbandRoom = async () => {
  try {
    // 先显式离开房间
    await signalRService.leaveRoom()
    
    // 确保玩家已离开房间
    await new Promise(resolve => setTimeout(resolve, 500))
    
    const apiBaseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:5000'
    const response = await fetch(`${apiBaseUrl}/api/commands/disband-room`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        
        RoomCode: currentRoom.value.code
      })
    })
    
    if (response.ok) {
      await signalRService.forceEndGame()
      isInRoom.value = false
      currentRoom.value = {
        name: '',
        code: '',
        maxPlayers: 6,
        players: 0,
        password: ''
      }
      // 强制刷新房间列表
      await refreshRooms()

    } else {
      const error = await response.json()
      errorMessage.value = error.message || '解散房间失败'
    }
  } catch (error) {
    errorMessage.value = '网络错误，请重试'
  }
}

// 监听房间解散事件
onMounted(() => {
  signalRService.getConnection()?.on('RoomClosed', (message) => {
    isInRoom.value = false
    currentRoom.value = {
      name: '',
      code: '',
      maxPlayers: 6,
      players: 0,
      password: ''
    }
    errorMessage.value = message || '房间已解散'
    refreshRooms()
  })

  // 初始化时获取房间列表
  refreshRooms()
})
const sendMessage = () => {
  if (!newMessage.value.trim()) return
  
  chatMessages.value.push({
    sender: '你',
    content: newMessage.value
  })
  newMessage.value = ''
  
  // TODO: 实现消息发送到服务器的逻辑
}

// 组件挂载时获取房间列表
onMounted(() => {
  refreshRooms()
  
  // 检查URL中是否有房间代码，自动加入
  const roomCode = router.currentRoute.value.params.roomCode
  if (roomCode) {
    joinRoomCode.value = roomCode
    joinRoom()
  }
  
  // 临时添加一些测试房间数据来显示滚动条
  setTimeout(() => {
    if (availableRooms.value.length === 0) {
      availableRooms.value = [
        {
          id: '1',
          name: '测试房间1',
          code: 'ABC123',
          playerCount: 2,
          maxPlayers: 6,
          gameDuration: 180,
          hasPassword: false
        },
        {
          id: '2',
          name: '测试房间2',
          code: 'DEF456',
          playerCount: 4,
          maxPlayers: 6,
          gameDuration: 240,
          hasPassword: true
        },
        {
          id: '3',
          name: '测试房间3',
          code: 'GHI789',
          playerCount: 1,
          maxPlayers: 4,
          gameDuration: 300,
          hasPassword: false
        },
        {
          id: '4',
          name: '测试房间4',
          code: 'JKL012',
          playerCount: 3,
          maxPlayers: 5,
          gameDuration: 180,
          hasPassword: false
        },
        {
          id: '5',
          name: '测试房间5',
          code: 'MNO345',
          playerCount: 6,
          maxPlayers: 6,
          gameDuration: 240,
          hasPassword: true
        },
        {
          id: '6',
          name: '测试房间6',
          code: 'PQR678',
          playerCount: 2,
          maxPlayers: 3,
          gameDuration: 300,
          hasPassword: false
        },
        {
          id: '7',
          name: '测试房间7',
          code: 'STU901',
          playerCount: 1,
          maxPlayers: 4,
          gameDuration: 180,
          hasPassword: false
        },
        {
          id: '8',
          name: '测试房间8',
          code: 'VWX234',
          playerCount: 5,
          maxPlayers: 6,
          gameDuration: 240,
          hasPassword: true
        },
        {
          id: '9',
          name: '测试房间9',
          code: 'YZA567',
          playerCount: 3,
          maxPlayers: 4,
          gameDuration: 300,
          hasPassword: false
        },
        {
          id: '10',
          name: '测试房间10',
          code: 'BCD890',
          playerCount: 4,
          maxPlayers: 5,
          gameDuration: 180,
          hasPassword: true
        },
        {
          id: '11',
          name: '测试房间11',
          code: 'EFG123',
          playerCount: 1,
          maxPlayers: 6,
          gameDuration: 240,
          hasPassword: false
        },
        {
          id: '12',
          name: '测试房间12',
          code: 'HIJ456',
          playerCount: 5,
          maxPlayers: 6,
          gameDuration: 300,
          hasPassword: true
        }
      ]
    }
  }, 1000)
})
</script>

<style scoped>
/* 现代化设计样式 */
.modern-lobby {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  padding-bottom: 40px;
}

/* 全局背景和滚动条样式 */
html {
  scrollbar-width: auto;
  scrollbar-color: #667eea #f0f0f0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  min-height: 100%;
}

body {
  scrollbar-width: auto;
  scrollbar-color: #667eea #f0f0f0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

#app {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  min-height: 100vh;
}

/* Webkit浏览器的全局滚动条样式 */
::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 8px;
  margin: 4px;
  border: 1px solid #e0e0e0;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  transition: all 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-corner {
  background: #f0f0f0;
}

/* 背景装饰 */
.background-decoration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.floating-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 8s ease-in-out infinite;
}

.circle-1 {
  width: 100px;
  height: 100px;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.circle-2 {
  width: 150px;
  height: 150px;
  top: 20%;
  right: 15%;
  animation-delay: 3s;
}

.circle-3 {
  width: 80px;
  height: 80px;
  bottom: 20%;
  left: 20%;
  animation-delay: 6s;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(180deg); }
}

/* 主要内容容器 */
.lobby-container {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
}

/* 头部样式 */
.lobby-header {
  text-align: center;
  margin-bottom: 30px;
  color: white;
}

.header-content {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 25px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.logo-icon {
  font-size: 2.5rem;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.logo-text h1 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(45deg, #fff, #f0f0f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-text p {
  font-size: 0.9rem;
  opacity: 0.8;
  margin: 3px 0 0 0;
  letter-spacing: 1px;
}

.header-subtitle p {
  font-size: 1rem;
  margin-bottom: 12px;
  opacity: 0.9;
}

.feature-tags {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.feature-tags span {
  background: rgba(255, 255, 255, 0.15);
  padding: 5px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 主要内容区域 - 水平布局 */
.lobby-main {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 25px;
  align-items: start;
}

/* 左侧面板 */
.left-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 右侧面板 */
.right-panel {
  min-height: 500px;
}

/* 卡片样式 */
.action-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

.action-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.card-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  text-align: center;
}

.card-icon {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.card-header h2 {
  font-size: 1.3rem;
  margin: 0 0 6px 0;
  font-weight: 600;
}

.card-header p {
  margin: 0;
  opacity: 0.9;
  font-size: 0.85rem;
}

.card-content {
  padding: 20px;
}

/* 表单样式 */
form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-group label {
  font-weight: 600;
  color: #333;
  font-size: 0.85rem;
}

.optional {
  font-weight: 400;
  color: #666;
  font-size: 0.75rem;
}

input, select {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 0.9rem;
  background: white;
  transition: all 0.3s ease;
  outline: none;
}

input:focus, select:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* 按钮样式 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(102, 126, 234, 0.3);
}

.btn-secondary {
  background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(108, 117, 125, 0.3);
}

.btn-success {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
}

.btn-success:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(40, 167, 69, 0.3);
}

.btn-outline {
  background: transparent;
  color: #667eea;
  border: 2px solid #667eea;
}

.btn-outline:hover {
  background: #667eea;
  color: white;
}

.btn-sm {
  padding: 5px 10px;
  font-size: 0.8rem;
}

.btn-disabled {
  background: #e9ecef;
  color: #6c757d;
  cursor: not-allowed;
}

/* 加载动画 */
.loading-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-spinner-large {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 房间列表样式 */
.room-list-section {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.section-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-info h3 {
  font-size: 1.2rem;
  margin: 0 0 3px 0;
  font-weight: 600;
}

.header-info p {
  margin: 0;
  opacity: 0.9;
  font-size: 0.85rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.room-list {
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.room-item {
  background: white;
  border-radius: 10px;
  padding: 15px;
  border: 1px solid #e1e5e9;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.room-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  border-color: #667eea;
}

.room-info {
  flex: 1;
}

.room-name {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.room-details {
  display: flex;
  gap: 12px;
  font-size: 0.8rem;
  color: #666;
}

.room-code {
  font-family: 'Courier New', monospace;
  background: #f8f9fa;
  padding: 2px 5px;
  border-radius: 3px;
}

.room-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.password-badge {
  font-size: 1rem;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 30px 20px;
  color: #666;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.empty-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  opacity: 0.5;
}

.empty-state h4 {
  font-size: 1.1rem;
  margin: 0 0 6px 0;
  color: #333;
}

.empty-state p {
  margin: 0;
  font-size: 0.9rem;
}

/* 错误提示 */
.error-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #f8d7da;
  color: #721c24;
  padding: 12px 18px;
  border-radius: 8px;
  border: 1px solid #f5c6cb;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  z-index: 1000;
  animation: slideIn 0.3s ease;
  font-size: 0.9rem;
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* 加载遮罩 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.loading-content {
  background: white;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.loading-content p {
  margin: 15px 0 0 0;
  color: #666;
  font-size: 1rem;
}

/* 等待房间样式 */
.waiting-room {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.waiting-header {
  text-align: center;
  margin-bottom: 20px;
}

.waiting-header h2 {
  font-size: 1.8rem;
  margin-bottom: 5px;
}

.waiting-header p {
  color: #666;
  font-size: 1rem;
}

.waiting-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.player-slot {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  transition: all 0.3s ease;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.player-slot.occupied {
  background: #e9f5ff;
  border: 1px solid #90caf9;
}

.player-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.player-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #667eea;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.player-name {
  font-weight: 500;
}

.empty-slot {
  color: #666;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.empty-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #f0f0f0;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bold;
  border: 2px dashed #ddd;
}

.waiting-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

.waiting-chat {
  background: white;
  border-radius: 8px;
  border: 1px solid #e1e5e9;
  padding: 15px;
  max-height: 300px;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 15px;
  padding-right: 5px;
}

.message {
  margin-bottom: 8px;
  line-height: 1.4;
}

.message .sender {
  font-weight: 600;
  margin-right: 5px;
}

.chat-input {
  display: flex;
  gap: 10px;
}

.chat-input input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.chat-input button {
  padding: 8px 15px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 游戏规则弹窗样式 */
.rules-section {
  margin-top: 15px;
}

.rules-button {
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.rules-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}

:deep(.game-rules-popover) {
  max-width: 500px;
}

:deep(.game-rules-popover .el-popover__title) {
  font-size: 18px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 15px;
}

.rules-content {
  text-align: left;
}

.rule-section {
  margin-bottom: 20px;
}

.rule-section h4 {
  color: #409EFF;
  margin: 0 0 8px 0;
  font-size: 16px;
}

.rule-section p {
  margin: 5px 0;
  color: #333;
  line-height: 1.6;
}

.rule-section ul {
  margin: 5px 0;
  padding-left: 20px;
}

.rule-section li {
  margin: 5px 0;
  color: #333;
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .lobby-main {
    grid-template-columns: 350px 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .lobby-container {
    padding: 15px;
  }
  
  .header-content {
    padding: 20px 15px;
  }
  
  .logo {
    flex-direction: column;
    gap: 10px;
  }
  
  .logo-text h1 {
    font-size: 1.8rem;
  }
  
  .lobby-main {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .right-panel {
    min-height: 400px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .room-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .room-details {
    flex-direction: column;
    gap: 4px;
  }
}
</style>
